<template>
  <div class="main">
    <a-steps :current="current">
      <a-step title="填写申请信息"></a-step>
      <a-step title="确认配送信息"/>
      <a-step title="完成申请"/>
    </a-steps>
    <div class="steps-content">
      <div v-if="current === 0">
        <a-form-model ref="form" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="选择司机" required>
            <a-select v-model="selectDriverIndex" placeholder="请选择配送司机">
              <a-select-option :value="index" v-for="(item, index) in drivers" :key="index" :disabled="item.driving === 0">
                {{ item.name }}
                <i class="dis" v-if="item.driving === 0">
                  <a-icon type="close-circle"/>
                  正在途中</i>
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="选择运输车辆" required>
            <a-select v-model="selectVehicleIndex" placeholder="请选择配送车辆">
              <a-select-option :value="index" v-for="(item, index) in vehicles" :key="index" :disabled="item.driving === 0">
                {{ item.type }} : {{ item.number }}
                <i class="dis" v-if="item.driving === 0">
                  <a-icon type="close-circle"/>
                  正在途中</i>
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="预计交货时间" required>
            <a-date-picker
                v-model="form.time"
                show-time
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
            />
          </a-form-model-item>
          <a-form-model-item label="加急处理">
            <a-switch v-model="form.urgentResult"/>
          </a-form-model-item>
          <a-form-model-item label="货物大小">
            <a-radio-group v-model="form.size">
              <a-radio :value="1">正常</a-radio>
              <a-radio :value="2">小件</a-radio>
              <a-radio :value="3">大件</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="注意事项">
            <a-checkbox-group v-model="form.cares">
              <a-checkbox value="冰柜冷藏" name="type">
                冰柜冷藏
              </a-checkbox>
              <a-checkbox value="注意易碎" name="type">
                注意易碎
              </a-checkbox>
              <a-checkbox value="防止高温" name="type">
                防止高温
              </a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="客户姓名" prop="name">
            <a-input v-model="form.name"/>
          </a-form-model-item>
          <a-form-model-item label="客户电话" prop="phone">
            <a-input v-model="form.phone"/>
          </a-form-model-item>
          <a-form-model-item label="客户地址" prop="address">
            <a-input v-model="form.address" type="textarea" :rows="2"/>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
            <a-button type="primary" @click="next">
              下一步
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-if="current === 1" class="check">
        <p>送货司机： {{ form.driver }}</p>
        <p>车牌号码： {{ form.number }}</p>
        <p>加急处理： {{ form.urgent === 1 ? '否' : '是' }}</p>
        <p v-if="form.size === 1">货物大小： {{ '正常' }}</p>
        <p v-else>货物大小： {{ form.size === 2 ? '小件' : '大件' }}</p>
        <p>注意事项： {{ form.care }}</p>
        <p>客户姓名： {{ form.name }}</p>
        <p>客户电话： {{ form.phone }}</p>
        <p>客户地址： {{ form.address }}</p>
        <p>预计送达： {{ form.time }}</p>
        <a-button type="danger" style="margin-right: 20px" :loading="loading" @click="submit">提交</a-button>
        <a-button @click="current = 0">上一步</a-button>
      </div>
      <div v-if="current === 2">
        <a-result
            status="success"
            title="提交成功"
        >
          <template #extra>
            <a-button key="buy" @click="addAgain">
              再次填写申请信息
            </a-button>
          </template>
        </a-result>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DisCreate',
  data() {
    return {
      loading: false,
      labelCol: {span: 6},
      wrapperCol: {span: 12},
      current: 0,
      selectDriverIndex: '',
      selectVehicleIndex: '',
      drivers: [],
      vehicles: [],
      form: {
        id: '',
        did: '',
        vid: '',
        driver: '',
        number: '',
        name: '',
        phone: '',
        address: '',
        urgentResult: false,
        cares: [],
        care: '',
        time: '',
        status: 0,
        urgent: 0,
        size: 1
      },
      rules: {
        name: [{required: true, message: '请输入客户姓名', trigger: 'blur'}],
        phone: [{required: true, message: '请输入客户手机号', trigger: 'blur'}],
        address: [{required: true, message: '请输入客户地址', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.loadCanData()
  },
  methods: {
    formatDate(date, format) {
      let time = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S+': date.getMilliseconds()
      }
      console.log(time)
      if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (let k in time) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? time[k] : ('00' + time[k].substr(('' + time[k]).length)))
        }
      }
      return format
    },
    loadCanData() {
      this.getRequest('/api/distribution/can').then(resp => {
        if (resp) {
          this.drivers = resp.drivers
          this.vehicles = resp.vehicles
        }
      })
    },
    next() {
      if (this.selectDriverIndex !== ''){
        this.form.driver = this.drivers[this.selectDriverIndex].name
        this.form.did = this.drivers[this.selectDriverIndex].id
      } else {
        this.$message.error('未选择配送司机')
        return
      }
      if (this.selectVehicleIndex !== '') {
        this.form.number = this.vehicles[this.selectVehicleIndex].number
        this.form.vid = this.vehicles[this.selectVehicleIndex].id
      } else {
        this.$message.error('未选择配送车辆')
        return
      }
      if (this.form.time === '') {
        this.$message.error('未选择预计交货时间')
        return
      }
      if (this.form.urgentResult === false) {
        this.form.urgent = 1
      } else {
        this.form.urgent = 0
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          let care = ''
          for (let i = 0; i < this.form.cares.length; i++) {
            care += this.form.cares[i] + " "
          }
          this.form.care = care
          this.form.time = this.form.time.format('yyyy-MM-DD HH:mm:ss')
          this.current = 1
        }
      })
    },
    submit() {
      this.loading = true
      this.postRequest('/api/distribution/', this.form).then(resp => {
        if (resp) {
          this.loading = false
          this.current = 2
        } else {
          this.loading = false
        }
      })
    },
    addAgain() {
      this.form = {
        urgentResult: false,
        status: 0,
        urgent: 0,
        size: 1
      }
      this.selectDriverIndex = ''
      this.selectVehicleIndex = ''
      this.current = 0
      this.loadCanData()
    }
  },
}
</script>

<style scoped>
.main {
  padding: 50px 180px;
  background: #ffffff;
}

.steps-content {
  margin-top: 40px;
}

.check {
  padding-left: 200px;
}

.check p {
  padding-bottom: 10px;
}

.dis {
  padding-left: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: red;
}
</style>